// 导入必要的模块和函数
import el from '../utils/el'
import box from './box'
import systemHeadElement from './systemHeadElement'
import measureElement from './measureElement'

/**
 * 创建每一行元素的函数
 *
 * 该函数用于生成一个每一行元素的图形表示，其中包括每一行头和多个小节的布局
 *
 * @param {Object} systemLayout - 每一行布局对象，包含每一行头和小节的布局信息
 * @returns {SVGElement} - 返回表示每一行元素的SVG图形元素
 */
export default function systemElement(systemLayout) {
  // 从每一行布局对象中解构出每一行头布局和小节布局数组
  const { headLayout, measuresLayouts } = systemLayout

  // 创建并返回一个SVG图形元素，包含每一行头和所有小节的图形表示
  return el.create('g', [
    // box(systemLayout, 'blue'), // 注释掉的调试用代码，用于显示每一行布局（绿色）

    // 如果 每一行 头 布局存在，则创建每一行头元素，否则返回空数组
    headLayout ? systemHeadElement(headLayout) : [],
    // 遍历小节布局数组，为每个小节创建图形元素
    measuresLayouts.map(layout => measureElement(layout))
  ])
}
